<template>
  <view class="index">
    <text>{{ sex | dictLabel('sex') }}</text>
    <van-field
      :value="motto"
      label="输入框"
      @change="change"
    />
    <upload-image :value="msg" @input="input"/>
    <image-gallery :value="msg" />
  </view>
</template>

<script>
import './index.less'
import UploadImage from '@/components/uploadImage/uploadImage'
import ImageGallery from '@/components/imageGallery/imageGallery'
import Taro from '@tarojs/taro'

export default {
  components: {ImageGallery, UploadImage},
  data () {
    return {
      fileList: [],
      sex: '1',
      msg: 'https://img.yzcdn.cn/vant/cat.jpeg,https://img.yzcdn.cn/vant/cat.jpeg',
      checked: true,
      show: false,
      minDate: new Date(2020, 0, 1).getTime(),
      maxDate: new Date(2025, 10, 1).getTime(),
      currentDate: new Date().getTime(),
      motto: 'Hello miniprograme',
      username: undefined,
      password: undefined,
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      }

    }
  },
  created() {
    console.log('query',this.$Router.query.id)
  },
  methods: {
    input(val){
      console.log('val',val)
    },
    beforeRead(event) {
      console.log('beforeRead', event)
      const { file, callback } = event.detail;
      callback(file.type === 'image');
    },
    afterRead(event) {
      const { file } = event.detail;
      console.log('afterRead', event)

      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      Taro.uploadFile({
        url: 'http://localhost:8082//json/oss/upload', // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: 'file',
        formData: { user: 'test' },
        success(res) {
          console.log('res',res)
          // 上传完成需要更新 fileList
          // const { fileList = [] } = this.data;
          // fileList.push({ ...file, url: res.data });
          // this.setData({ fileList });
        },
      });
    },
    click () {
      this.show = true
      // Toast('this.show')
      console.log('show', this.show)
    },
    change (event) {
      console.log('event', event)
      this.motto = event.detail
    }
  }
}
</script>
